<template>
  <!-- 自定义标签页面 -->
  <view class="main">
    <view class="top">
      <view class="left"> 添加标签 </view>
      <view class="center">
        <input
          type="text"
          value=""
          placeholder="请输入标签名称"
          v-model="addLabel"
          maxlength="12"
        />
      </view>
      <view class="right" @tap="handleAddLabel">
        <image src="../../imges/jiaru.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 常用标签 -->
    <!-- 		<view class="changTags">
			<view class="title">
				常用标签
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in 5" :key="index">
					<view class="left">
						学习园
						<text class="xian"></text>
					</view>
					<view class="right">
						<image src="../../imges/jiahua.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view> -->

    <!-- 我的标签 -->
    <drag-sorts
      :list="list"
      @change="onDragSortChange"
      v-if="list.length != 0"
    ></drag-sorts>

    <view class="zhuyi" v-if="list.length != 0">
      <view class="left"> 注： </view>
      <view class="right">
        <view class="one"> 拖动标签左边区域可调整排列顺序！ </view>
        <view class="two"> 标签顺序越靠前表示它的权重越大。 </view>
      </view>
    </view>

    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="list.length == 0">
      <image src="../../imges/nobiaoqian.png" mode="aspectFill"></image>
      <text>暂未添加标签</text>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import dragSorts from "@/components/drag-sorts/index.vue";
export default {
  components: {
    dragSorts,
  },
  data() {
    return {
      quanId: "", //圈子id
      addLabel: "", //标签
      list: [
        {
          label: "初始测试",
        },
      ],
    };
  },
  onLoad(options) {
    this.quanId = options.id;
    // console.log(this.quanId)
    this.handleList(); //标签列表
  },
  methods: {
    handleAddLabel() {
      //添加标签
      if (this.addLabel.trim() == "") {
        uni.showToast({
          title: "请输入要添加的标签",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/addFriendsLabel",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.quanId,
            label: this.addLabel,
          },
        }).then((res) => {
          // console.log(res, '添加标签')
          if (res.data.code == 200) {
            uni.showToast({
              title: "添加成功",
              duration: 2000,
              icon: "none",
            });
            this.addLabel = "";
            this.handleList();
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleList() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/getFriendsLabelList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quanId,
          },
        }).then((res) => {
          // console.log(res, '标签列表')
          if (res.data.code == 200) {
            this.list = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    onDragSortChange(e) {
      //得到排序后的数组
      let arrList = [...e];
      function compare(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        };
      }
      let changArr = [];
      arrList.sort(compare("SortNumber")).forEach((v) => {
        changArr.push({
          label: v.label,
        });
      });
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/reorderFriendsLabel",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quanId,
            list: changArr,
          },
        }).then((res) => {
          // console.log(res, '排序')
          if (res.data.code == 200) {
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .wu_Huo {
    margin-top: 300rpx;
    padding-bottom: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 360rpx;
      height: 260rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .top {
    display: flex;
    height: 70rpx;
    padding: 20rpx 32rpx;
    padding-bottom: 40rpx;
    border-top: 2rpx solid #eee;
    // border-bottom: 1rpx solid #eee;
    align-items: center;

    .left {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .center {
      width: 490rpx;
      height: 70rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 17rpx 3rpx rgba(0, 0, 0, 0.06);
      border-radius: 35rpx;
      padding: 0 25rpx;
      box-sizing: border-box;
      margin: 0 20rpx;

      input {
        width: 100%;
        height: 100%;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(70, 70, 70, 1);
      }
    }

    .right {
      width: 51rpx;
      height: 51rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .changTags {
    padding: 29rpx 35rpx;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 40rpx;
    margin-bottom: 43rpx;

    .title {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        align-items: center;
        background: rgba(244, 244, 244, 1);
        border-radius: 31rpx;
        padding: 0 25rpx;
        height: 62rpx;
        margin-top: 25rpx;
        margin-right: 25rpx;

        .left {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(135, 135, 135, 1);

          .xian {
            display: inline-block;
            width: 2rpx;
            height: 18rpx;
            background-color: #ccc;
            margin: 0 15rpx;
          }
        }

        .right {
          width: 23rpx;
          height: 23rpx;
          // margin-top: -32rpx;
          display: flex;
          align-items: center;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .myTags {
    padding: 0 32rpx;
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-top: 40rpx;
      margin-right: 40rpx;
      padding: 0 23rpx;
      height: 62rpx;
      display: flex;
      align-items: center;
      border: 2rpx solid rgba(135, 135, 135, 1);
      border-radius: 31rpx;

      .left {
        height: 27rpx;
        width: 35rpx;
        // margin-top: -26rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
          // vertical-align: center;
        }
      }

      .center {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(135, 135, 135, 1);
        margin-left: 15rpx;

        text {
          display: inline-block;
          height: 18rpx;
          width: 2rpx;
          background-color: #eee;
          margin: 0 15rpx;
        }
      }

      .right {
        width: 18rpx;
        height: 18rpx;
        // margin-top: -40rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .zhuyi {
    margin-top: 30rpx;
    padding: 50rpx 33rpx;
    padding-top: 10rpx;
    display: flex;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(135, 135, 135, 1);
    line-height: 36rpx;
  }
}
</style>
